<template>
  <div class="container">
    <div class="mainCon">
      <div class="topContainer paddingContainer">
        <div class="leftPart">
          <h1>政务考核</h1>
          <p class="explain">
            按照条例要求，依托服务平台，以平台信用评价、第三方评估评级和国家保障农民工资支付考核细则为标准，对各地区保障农民工资支付工作进行考核评定
          </p>
          <div class="submitBox">
            <el-button
              type="primary"
              class="commonBut saveBtn"
              @click="addCheck"
              :loading="isSaveLoading"
            >
              发布考核
            </el-button>
          </div>
        </div>
        <div class="rightPart">
          <img src="/static/img/evaluation/explain.png" alt="" />
        </div>
      </div>
      <div class="centerContainer">
        <div class="paddingContainer">
          <p class="titleTxt">考核内容</p>
          <div class="modelBox">
            <div class="model">
              <img src="/static/img/evaluation/record.png" alt="" />
              <h2>项目备案</h2>
              <p>辖区内项目录入监管平台的建档比例等情况</p>
            </div>
            <div class="model">
              <img src="/static/img/evaluation/workable.png" alt="" />
              <h2>制度落实</h2>
              <p>各级各部门对实名制管理、代发工资等制度落实</p>
            </div>
            <div class="model">
              <img src="/static/img/evaluation/implement.png" alt="" />
              <h2>政府履职</h2>
              <p>是否成立领导小组、出台配套制度等</p>
            </div>
            <div class="model">
              <img src="/static/img/evaluation/handle.png" alt="" />
              <h2>案件办理</h2>
              <p>欠薪案件的立案率和欠薪案件结案率，欠薪问题等</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomContainer">
        <div class="paddingContainer">
          <p class="titleTxt">考核流程</p>
          <div class="processBox">
            <div class="process">
              <div class="title">
                <img src="/static/img/evaluation/light.png" alt="" />
                <h2>地区自评</h2>
                <div class="arrow">
                  <img src="/static/img/evaluation/right.png" alt="" />
                </div>
              </div>
              <p class="subTitle">
                各级人民政府对照考核方案及细则，对考核年度保障农民工工资支付工作进展情况进行自查自纠，填写自查考核表，形成自查报告，报送根治欠薪领导小组。
              </p>
            </div>
            <div class="process">
              <div class="title">
                <img src="/static/img/evaluation/circle.png" alt="" />
                <h2>实地核查</h2>
                <div class="arrow">
                  <img src="/static/img/evaluation/right.png" alt="" />
                </div>
              </div>
              <p class="subTitle">
                由根治欠薪领导小组办公室组织考核组，依据考核方案及细则，采取听取汇报、核查资料、现场查看、组织暗访得方式，对各地人民政府考核年度保障农民工工资支付工作进展情况和成效进行实施核查，对有关考核指标进行评估。
              </p>
            </div>
            <div class="process">
              <div class="title">
                <img src="/static/img/evaluation/write.png" alt="" />
                <h2>考核评定</h2>
              </div>
              <p class="subTitle">
                根治欠薪领导小组组织小组各成员单位根据各县市自查情况，结合实地核查和社会治安综合治理、公安、信访等部门掌握的情况，进行考核评定
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="lastContainer">
        <div class="paddingContainer">
          <p class="titleTxt">考核评级</p>
          <div class="tableBox">
            <table>
              <tr>
                <th>评分</th>
                <th>工作评价</th>
                <th>评级</th>
              </tr>
              <tr>
                <td>90~100分</td>
                <td>优秀</td>
                <td>A</td>
              </tr>
              <tr>
                <td>60~90分</td>
                <td>合格</td>
                <td>B</td>
              </tr>
              <tr>
                <td><60</td>
                <td>差</td>
                <td>C</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'recCheck',
  data() {
    return {
      isSaveLoading: false,
    }
  },
  methods: {
    //创建评估
    addCheck() {
      this.$router.push({ path: '/home/checkAffairs/createCheck' })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  color: #333;
  .mainCon {
    padding: 0;
    background: #ecf5f6;
    border: 2px solid #009588;
    .paddingContainer {
      width: 82%;
      margin: 0 auto;
    }
    .titleTxt {
      line-height: 24px;
      font-size: 24px;
      text-align: center;
    }
    .topContainer {
      display: flex;
      -webkit-display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25px 0;
      .leftPart {
        padding-right: 70px;
        .explain {
          padding-top: 25px;
          padding-bottom: 40px;
          line-height: 22px;
          font-size: 16px;
        }
      }
    }
    .centerContainer {
      width: 100%;
      padding: 56px 0 80px 0;
      background: #fff;

      .modelBox {
        display: flex;
        -webkit-display: flex;
        justify-content: space-between;
        padding-top: 50px;
        .model {
          width: 25%;
          height: 270px;
          margin-right: 50px;
          padding: 40px 24px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          text-align: center;
          &:last-child {
            margin-right: 0;
          }
          h2 {
            padding-top: 18px;
            padding-bottom: 12px;
            font-size: 18px;
          }
          p {
            line-height: 21px;
            font-size: 14px;
            color: #666;
            text-align: left;
          }
        }
      }
    }
    .bottomContainer {
      width: 100%;
      padding: 56px 0 80px 0;

      .processBox {
        display: flex;
        -webkit-display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 120px;
        padding-top: 50px;

        .process {
          position: relative;
          width: 33.33%;
          .title {
            width: 100%;
            display: flex;
            -webkit-display: flex;
            justify-content: flex-start;
            align-items: center;
            h2 {
              display: inline-block;
              padding-left: 15px;
              white-space: nowrap;
              font-size: 18px;
            }
            .arrow {
              width: 100%;
              text-align: center;
              img {
                width: 80%;
                padding-bottom: 3px;
              }
            }
          }
          .subTitle {
            position: absolute;
            width: 75%;
            max-height: 75px;
            padding-top: 12px;
            line-height: 21px;
            font-size: 14px;
            color: #666;
          }
        }
      }
      .down {
        position: absolute;
        left: 10px;
        padding-top: 80px;
      }
    }
    .lastContainer {
      width: 100%;
      padding: 56px 0 80px 0;
      background: #fff;

      table {
        width: 70%;
        margin: 50px auto 0 auto;
        border-collapse: collapse;
        border-left: 1px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
        border-top: 1px solid #dbdbdb;

        th {
          background: #ecf5f6;
          font-weight: normal;
        }
        th,
        td {
          padding: 12px;
          text-align: center;
        }
        tr {
          /*border-right: 1px solid #dbdbdb;*/
          border-bottom: 1px solid #dbdbdb;
        }
      }
    }
  }
}
</style>
